import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Avatar, Col, Row, Button, message } from 'antd';
import { getPageQuery } from '../../utils/utils';
import LoadingWrapper from '../../components/LoadingWrapper';
import MyCard from './Card';
import defaultAvatar from '../../assets/avatar.png';
import styles from './index.less';
import { getUid } from '../../utils/token';

@connect(({ picture, user, loading }) => ({
  pictures: picture.pictures,
  user: user.user,
  loading: !!(
    loading.effects['picture/fetchTargetPictures'] || loading.effects['user/fetchTarget']
  ),
}))
export default class Index extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      uid: getPageQuery().uid || getUid(),
    };
  }

  componentDidMount() {
    this.getUserInfo();
    this.getPictures();
  }

  getPictures = () => {
    const { dispatch } = this.props;
    const { uid } = this.state;

    dispatch({
      type: 'picture/fetchTargetPictures',
      payload: {
        params: {
          uid,
        },
      },
    });
  };

  handleFans = () => {
    const { history } = this.props;
    const { uid } = this.state;

    history.push(`/user-list?type=fans&uid=${uid}`);
  };

  handleFollowing = () => {
    const { history } = this.props;
    const { uid } = this.state;

    history.push(`/user-list?type=following&uid=${uid}`);
  };

  getUserInfo = () => {
    const { dispatch } = this.props;
    const { uid } = this.state;

    dispatch({
      type: 'user/fetchTarget',
      payload: {
        params: {
          uid,
        },
      },
    });
  };

  handleFollow = () => {
    const { dispatch } = this.props;
    const { uid } = this.state;

    dispatch({
      type: 'user/follow',
      payload: {
        params: {
          params: {
            cid: getUid(),
            ccid: uid,
          },
        },
        onSuccess: () => {
          message.success('关注成功！');
          this.getUserInfo();
        },
      },
    });
  };

  handleUnfollow = () => {
    const { dispatch } = this.props;
    const { uid } = this.state;

    dispatch({
      type: 'user/unfollow',
      payload: {
        params: {
          uid,
        },
        onSuccess: () => {
          message.info('取关成功！');
          this.getUserInfo();
        },
      },
    });
  };

  handleDetail = pid => {
    const { history } = this.props;
    history.push(`/detail?pid=${pid}`);
  };

  render() {
    const { pictures, user, loading } = this.props;

    return (
      <LoadingWrapper loading={loading}>
        <Card className={styles.accountWrapper}>
          <Row>
            <Col span={4}>
              <Avatar className={styles.avatar} src={user.avatar || defaultAvatar} />
            </Col>
            <Col span={15}>
              <h1>{user.nickname}</h1>
            </Col>
            <Col span={3}>
              {getPageQuery().uid &&
                (user.isfellowed ? (
                  <Button type="danger" className={styles.followBtn} onClick={this.handleUnfollow}>
                    取关
                  </Button>
                ) : (
                  <Button className={styles.followBtn} onClick={this.handleFollow}>
                    关注
                  </Button>
                ))}
            </Col>
          </Row>
          <Row>
            <Col offset={4} span={9}>
              <a onClick={this.handleFans}>
                粉丝：
                {user.fans}
              </a>
            </Col>
            <Col span={10}>
              <a onClick={this.handleFollowing}>
                关注：
                {user.fellows}
              </a>
            </Col>
          </Row>
        </Card>
        {pictures.length > 0 &&
          pictures.map(item => (
            <MyCard key={item.id} picInfo={item} onDetail={this.handleDetail} />
          ))}
      </LoadingWrapper>
    );
  }
}
